<script lang="ts" setup>
const goUploadDetail = () => {
  uni.navigateTo({
    url: '/pages/upload/upload'
  })
}
const goUploadImage=()=>{
    uni.navigateTo({
    url: '/subPkg/uploadImage/uploadImage'
  })
}
</script>

<template>
  <view class="flex flex-column justify-center align-center"
        style="width: 100%;height: 100vh;background-color: #fff;row-gap: 50px">
    <view class="flex flex-column justify-center align-center" style="row-gap: 10px">
      <image class="element" src="/static/upload-new.png" style="width:200px;height: 200px"
             @click="goUploadDetail"></image>
      <text class="text-black text-bold text-lg">动物详细上传</text>
      <text class="text-gray">（包括图片，动物相关介绍等审核较慢）</text>

    </view>

    <view class="flex flex-column justify-center align-center" style="row-gap: 10px">
      <image class="element" src="/static/upload-pic.png" style="width:200px;height: 200px" @click="goUploadImage"></image>
      <text class="text-black text-bold text-lg">动物图片上传</text>
      <text class="text-gray">（选择图片即可上传，急速审核）</text>
    </view>

  </view>
</template>

<style lang="scss" scoped>
/* 定义一个名为floating的动画 */
@keyframes floating {
  0% {
    transform: translateY(0); /* 初始位置 */
  }
  50% {
    transform: translateY(-4px); /* 向上移动4像素 */
  }
  100% {
    transform: translateY(0); /* 回到初始位置 */
  }
}

/* 应用动画到指定的元素 */
.element {
  animation: floating 2s ease infinite; /* 动画名称、持续时间、缓动函数、循环次数 */
}
</style>
